<template>
  <div>
    <baidu-map
      id="allmap"
      @ready="handler"
      style="height:375px"
      @click="getClickInfo"
      :scroll-wheel-zoom="true"
    >
      <!-- <div v-for="(item,index) in markers" v-bind:key="index">
        <bm-marker :position="{lng: marker.lng, lat: marker.lat}" :dragging="true">
          <bm-info-window
            title="提示:"
            :position="{lng: marker.lng, lat: marker.lat}"
            :show="marker.showFlag"
            @close="infoWindowClose(marker)"
            @open="infoWindowOpen(marker)"
          ></bm-info-window>
        </bm-marker>
      </div> -->
    </baidu-map>
  </div>
</template>

<script>
//地图组件---按需引入
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker
} from "vue-baidu-map";
export default {
  name: "bdMap",
  props:{
        points:{
             type:Array,
             default:[]
        },
        lineList:{
             type:Array,
             default:[]
        }
  },
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker
  },
  data() {
    return {
      center: { lng: 111.74427, lat: 27.258987 },
      zoom: 7,
      map: null, // 地图实例
      BMap: null,
    };
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(this.center.lng, this.center.lat);
      map.centerAndZoom(point, 8);
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e) {
        // 定位成功事件
        var address = "";
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("当前定位地址为：" + address);
      });
      geolocationControl.addEventListener("locationError", function(e) {
        // 定位失败事件
        alert(e.message);
      });
      map.addControl(geolocationControl);
      this.map = map;
      this.BMap = BMap;
      this.setMapIcon(BMap, map);
    },
    // 点击地图
    getClickInfo(e) {
      console.log('click', e);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
   async setMapIcon(BMap, map) {
      let points = this.points||[],that = this,icon = new BMap.Icon(
        require("@/assets/lg.png"),
        new BMap.Size(20, 20)
      );
      points.forEach(async (v, k) => {
        //设置标注的经纬度
        let marker = new BMap.Marker(new BMap.Point(v.option[0], v.option[1]), {
          icon: icon
        }),sContent =`
          <div class='infoWindow'>
          <span style='margin:0 0 5px 0;padding:0.4em 0'>${v.title}</span>
          <div>${v.content}</div>
          </br> 
          </div>
          `;
        //把标注添加到地图上
        await map.addOverlay(marker);
        marker.addEventListener("click", e => {
          if (e.point) {
            var point = new BMap.Point(e.point.lng, e.point.lat);
            var infoWindow = new BMap.InfoWindow(sContent);
            map.openInfoWindow(infoWindow, point);
          }
        });
      });
     await this.lineList.forEach((V,K)=>{
            let points = [new BMap.Point(V[0][0], V[0][1]), new BMap.Point(V[1][0], V[1][1])],
            curve = new BMapLib.CurveLine(points, {
                strokeColor: "#0984FF",
                strokeWeight: 3,
                strokeOpacity: 0.5
            }); //创建弧线对象
            map.addOverlay(curve); //添加到地图中
      })
      // curve.enableEditing(); //开启编辑功能
    },
    infoWindowClose(marker) {
      marker.showFlag = false;
    },
    infoWindowOpen(marker) {
      marker.showFlag = true;
    }
  },
  mounted() {
  },
  created() {}
};
</script>